<template>
  <view class="forum-page">
    <!-- 分类导航 -->
    <view class="category-nav">
      <view
        v-for="(item, index) in classList"
        :key="item.id"
        :class="{ 'active': currentIndex === index }"
        @click="xuanzhong(index, item.id)"
      >
        {{ item.name }}
      </view>
    </view>
    <!-- 间隔区域 -->
    <view class="spacer"></view>
    <!-- 资讯列表 -->
    <view class="post-list">
      <view
        v-for="(item, index) in zixunList"
        :key="item.id"
        class="post-item"
        @click="goDetail(item.id, item.name)"
      >
        <view class="post-left">
          <image :src="'http://localhost:1337'+item.coverImage" mode=""></image>
        </view>
        <view class="post-right">
          <view class="post-title">资讯名称: {{ item.name }}</view>
          <view class="post-content" v-html="item.content"></view>
          <view class="post-content top">发布时间{{dayjs(item.createdAt).format('YYYY-MM-DD HH:mm:ss')}}</view>
          <view class="post-content top">观看量{{item.views}}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import { getClass, getList, getDetail } from '../../api/zixun.js';
import { onLoad, onShow } from "@dcloudio/uni-app";
import dayjs from 'dayjs';

let classList = ref([]);
let currentIndex = ref(0);
let zixunList = ref([]);
let xuanzhongContent = ref('教育');

// 获取资讯分类列表
async function getClassList() {
  let r2 = await getClass();
  console.log(r2.data.data);
  classList.value = r2.data.data;
}

// 获取列表
async function getListFn(id) {
  let r3 = await getList(id);
  console.log(r3.data.data);
  zixunList.value = r3.data.data;
}

function xuanzhong(index, id, name) {
  xuanzhongContent.value = name;
  currentIndex.value = index;
  // 获取列表
  getListFn(id);
}

onLoad((option) => {
  getClassList();
  getListFn(1);
});

onShow(() => {
  getClassList();
});

// 进入详情
function goDetail(id) {
  uni.navigateTo({
    url: "/pages/zixunDetail/zixunDetail?id="+id
  });
}
</script>

<style scoped>
/* 整体页面样式 */
.forum-page {
  padding: 20px;
  background-color: #f4f4f9;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.top {
  margin-top: 10px;
}

/* 分类导航样式 */
.category-nav {
  display: flex;
  margin-top: 20px;
  margin-bottom: 20px;
}

.category-nav view {
  flex: 1;
  margin-right: 10px;
  padding: 10px;
  background-color: #e0e0e0;
  text-align: center;
  line-height: 30px;
  font-size: 18px;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.category-nav view:hover {
  background-color: #d0d0d0;
}

.category-nav .active {
  color: white;
}

/* 间隔区域样式 */
.spacer {
  margin-top: 20px;
  margin-bottom: 20px;
}

/* 资讯列表样式 */
.post-list {
  display: flex;
  flex-direction: column;
}

.post-item {
  display: flex;
  background-color: white;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
  padding: 15px;
  transition: box-shadow 0.3s ease;
}

.post-item:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.post-left {
  flex: 2;
  margin-right: 15px;
}

.post-left image {
  width: 100%;
  height: 80px;
  object-fit: cover;
  border-radius: 5px;
}

.post-right {
  flex: 5;
}

.post-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin-bottom: 5px;
}

.post-content {
  font-size: 14px;
  color: #666;
  display: -webkit-box; 
  -webkit-box-orient: vertical; 
  -webkit-line-clamp: 3; 
  overflow: hidden; 
  text-overflow: ellipsis; 
}
</style>